body {
    margin: 0;
    padding: 0;
    /* background: url(pic.jpg); */
    background: hsl(208, 93%, 17%);
    /*插入背景图*/
    background-repeat: no-repeat;
    /*背景属性：背景图不重复显示*/
    background-size: 100%;
    /*背景图拉伸填满整个浏览器*/
    /* background-size: cover;
    padding-top: 20px; */
}

.one {
    width: 470px;
    padding: 40px;
    /*定义元素边框与元素内容之间的空间*/
    position: absolute;
    /*绝对定位*/
    top: 50%;
    left: 50%;
    /*使用 top:50%;left:50%; 让小矩形处于以左上角为原点的中心位置*/
    transform: translate(-50%, -50%);
    /*transform:translate(-50%,-50%); 让小矩形往左上移动自身长宽的50%*/
    /*上两条属性可以使内容居于浏览器中心*/
    /* background: #f3ddc7; */
    background: url(pic.jpg);
    /*背景颜色*/
    color: white;
    border-radius: 20px;
    /*圆角半径，边框半径*/
    text-align: center;
    /*内容居中*/
}

.two {
    border: 0;
    width: 270px;
    background: none;
    /*背景属性重置*/
    display: block;
    margin: 20px auto;
    /*居中且上下外边距为20px*/
    text-align: center;
    border: 2px solid #c5c0bf;
    border-radius: 25px;
    padding: 14px;
    outline: none;
    /*移除边框轮廓元素*/
    color: white;
}

.two:focus {
    /*焦点*/
    border: 0;
    width: 250px;
    background: none;
    display: block;
    /*将元素转换成块级， */
    margin: 20px auto;
    text-align: center;
    border: 2px solid #dfe6e9;
    border-radius: 25px;
    padding: 14px;
    outline: none;
    color: white;
}

.bth {
    border: 0;
    width: 100px;
    background: none;
    /* display: block; */
    /* 变为行内块（实现同一行显示） */
    display: inline-block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #c5c0bf;
    border-radius: 25px;
    padding: 14px;
    outline: none;
    color: white;
    cursor: pointer;
    /*鼠标移动到变成手指图标*/
}

.bth:hover {
    background: #81ecec;
    /*鼠标移动到内容变色*/
}